<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/login.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>登录</title>

<style>
 body {
  background-color: #f0ece9;
}
#login-box{
    width:30%;
    height:auto;
    margin:0 auto ;
    margin-top:13%;
    text-align:center;
    background:#00000060;
    padding:20px 50px;
    }
#login-box h1{
    color:#fff;
}
#login-box .form .item{
    margin-top:15px;
}
#login-box .form .item i{
    font-size:18px;
    color:#fff;
}
#login-box .form .item input{
    width:180px;
    font-size:18px;
    border:0;
    border-bottom:2px solid #fff;
    padding:5px 10px;
    background:#ffffff00;
    color:#fff;
}
#login-box 	button{
    margin-top:20px;
    width:190px;
    height:30px;
    font-size:20px;
    font-weight:700;
    color:#fff;
    background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
    border:0;
    border-radius:15px;
}
.but{   
        width: 300px;   
        min-height: 40px;   
        display: block;   
        background-color: #58abdb;   
        border: 1px solid #73cfdb;   
        color: #fff;   
        padding: 6px 10px;   
        font-size: 15px;   
        line-height: normal;   
        border-radius: 5px;   
        margin: 0;   
    }  
    </style>

    <meta charset="UTF-8">  
    <title>Login</title> 
    <link rel="stylesheet" type="text/css" href="Login.css"/>   
    <script>
                  var reg_password = /^\w{5,10}$/;
                  var reg_username = /^\w{2,10}$/;
        function R(){
            
            var Uname=document.getElementById("username").value;
            var Upassword=document.getElementById("password").value;
   
            if(Uname =="")
            {
             alert("请输入用户名");
              return false;
           }
           else if(Upassword =="")
          {
             alert("请输入密码");
             return  false;
           }
            else if (!reg_username.test(Uname)) {
                alert("用户名请输入2-10位字符");
                return  false;
            }else if(!reg_password.test(Upassword)){
                alert("密码请输入5-10个字符");
                return  false;
            }
          
        }
    </script>
</head>
<body  >
<%--<c:if test="${requestScope.flag==1}">--%>
<%--    <script>--%>
<%--        alert("用户名或密码错误，请重试");--%>
<%--    </script>--%>
<%--</c:if>--%>
    

    <form class="form-signin"   method="post"  action="/login" >
        <div id="login-box">
            <h1>订单信息管理系统</h1>
            <div class="form">
                <div class="item">
                    <i class="fa fa-github-alt" style="font-size:24px"></i>

            <input type="text"  name="username" id="username"  placeholder="请输入用户名"><br><br>
               
                  </div>
                  <div class="item">
                    <i class="fa fa-search" style="font-size:24px"></i>
            <input type="password" name="password" id="password" placeholder="请输入密码"><br><br>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit" onclick=" return R()">登录</button><br>
       
        </div>


        </div>
</form>
</body>
</html>